<template>
  <div class="statistics-container">
    <div class="realtime-stats">
      <marquee class="online-users" behavior="scroll" direction="left">
        当前在线申报人数：{{onlineUsers}}人 | 今日申报人数：{{todayApplicants}}人 | 本月通过率：{{monthlyPassRate}}%
      </marquee>
    </div>
    
    <el-row :gutter="20" class="top-cards">
      <el-col :span="6" v-for="(card, index) in statsCards" :key="index">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="stat-card">
            <i :class="card.icon"></i>
            <div class="stat-content">
              <div class="stat-value">{{card.value}}</div>
              <div class="stat-label">{{card.label}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <div class="chart-wrapper">
          <div ref="titlePassChart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <div ref="pieChart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <div class="chart-wrapper">
          <div ref="provinceChart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper">
          <div ref="industryChart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
    </el-row>

<!--    <div class="globe-container" ref="globeContainer"></div>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Mock from 'mockjs'

export default {
  name: 'Statistics',
  data() {
    return {
      chart: null,
      pieChart: null,
      provinceChart: null,
      industryChart: null,
      globe: null,
      onlineUsers: Mock.Random.integer(2000, 3000),
      todayApplicants: Mock.Random.integer(100, 500),
      monthlyPassRate: Mock.Random.integer(55, 85),
      statsCards: [
        { label: '总申请数', value: '1,268', icon: 'el-icon-document' },
        { label: '本月申请', value: '268', icon: 'el-icon-date' },
        { label: '平均通过率', value: '58.2%', icon: 'el-icon-data-line' },
        { label: '在审数量', value: '156', icon: 'el-icon-loading' }
      ]
    }
  },
  mounted() {
    this.initCharts()
    this.initGlobe()
    this.startDataRefresh()
  },
  methods: {
    initCharts() {
      // 职称等级分布图
      this.chart = echarts.init(this.$refs.titlePassChart)
      const option = {
        title: {
          text: '职称等级分布统计',
          subtext: '实时数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['申请人数', '通过人数', '在审人数'],
          bottom: 10
        },
        xAxis: {
          type: 'category',
          data: ['P1', 'P2', 'P3', 'P4', 'P5']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '申请人数',
            type: 'bar',
            data: [120, 180, 150, 80, 70],
            itemStyle: {
              color: '#91cc75'
            }
          },
          {
            name: '通过人数',
            type: 'bar',
            data: [80, 120, 90, 40, 30],
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
            name: '在审人数',
            type: 'bar',
            data: [40, 60, 60, 40, 40],
            itemStyle: {
              color: '#fac858'
            }
          }
        ]
      }
      this.chart.setOption(option)

      // 通过率饼图
      this.pieChart = echarts.init(this.$refs.pieChart)
      const pieOption = {
        title: {
          text: '各级别通过率',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '通过率',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 65, name: 'P1' },
              { value: 70, name: 'P2' },
              { value: 60, name: 'P3' },
              { value: 55, name: 'P4' },
              { value: 50, name: 'P5' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.pieChart.setOption(pieOption)

      // 省份分布图
      this.provinceChart = echarts.init(this.$refs.provinceChart)
      const provinceOption = {
        title: {
          text: '省份申请分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['江西省', '湖南省', '浙江省', '广东省', '福建省']
        },
        series: [
          {
            name: '申请数量',
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      this.provinceChart.setOption(provinceOption)

      // 行业分布图
      this.industryChart = echarts.init(this.$refs.industryChart)
      const industryOption = {
        title: {
          text: '行业分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '行业分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'IT行业' },
              { value: 735, name: '建筑类' },
              { value: 580, name: '电子技术' },
              { value: 484, name: '互联网' },
              { value: 300, name: '其他' }
            ]
          }
        ]
      }
      this.industryChart.setOption(industryOption)
    },

    initGlobe() {
      const container = this.$refs.globeContainer
      const scene = new THREE.Scene()
      const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000)
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      
      renderer.setSize(container.clientWidth, container.clientHeight)
      container.appendChild(renderer.domElement)

      // // 创建地球
      // const geometry = new THREE.SphereGeometry(5, 32, 32)
      // const texture = new THREE.TextureLoader().load('/earth.jpg')
      // const material = new THREE.MeshPhongMaterial({
      //   map: texture,
      //   bumpScale: 0.05,
      //   specular: new THREE.Color('grey')
      // })
      
      // const globe = new THREE.Mesh(geometry, material)
      // scene.add(globe)

      // 添加环境光和点光源
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
      scene.add(ambientLight)
      const pointLight = new THREE.PointLight(0xffffff, 1)
      pointLight.position.set(50, 50, 50)
      scene.add(pointLight)

      camera.position.z = 15

      // 添加控制器
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = true
      controls.dampingFactor = 0.05
      controls.rotateSpeed = 0.5

      const animate = () => {
        requestAnimationFrame(animate)
        // globe.rotation.y += 0.001
        controls.update()
        renderer.render(scene, camera)
      }
      animate()
    },

    startDataRefresh() {
      setInterval(() => {
        this.onlineUsers = Mock.Random.integer(2000, 3000)
        this.todayApplicants = Mock.Random.integer(100, 500)
        this.monthlyPassRate = Mock.Random.integer(55, 85)
      }, 3000)
    }
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
    if (this.pieChart) this.pieChart.dispose()
    if (this.provinceChart) this.provinceChart.dispose()
    if (this.industryChart) this.industryChart.dispose()
    if (this.globe) this.globe.dispose()
  }
}
</script>

<style scoped>
.statistics-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

.realtime-stats {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.online-users {
  color: #409EFF;
  font-weight: bold;
}

.top-cards {
  margin-bottom: 20px;
}

.stat-card {
  padding: 20px;
  display: flex;
  align-items: center;
}

.stat-card i {
  font-size: 48px;
  color: #409EFF;
  margin-right: 20px;
}

.stat-content {
  flex-grow: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-wrapper {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  height: 100%;
}

.globe-container {
  width: 100%;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-top: 20px;
}
</style> 